<!doctype html>

<head>
<meta charset="utf-8">
<title>Tasty - Recipes, Food Website and Blog Template - Responsive, Html5, CSS3, jquery </title>
<meta name="description" content="Recipes Template, Food Template Recipes Blog Template, cooking, Food, chef, Responsive Template, html5 Template, html5, css3, jquery, responsive">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/html5.js"></script>
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,400italic,700,700italic|Crete+Round:400,400italic|Lobster|Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<link id="color" rel="stylesheet" href="css/color1.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="css/mediaelementplayer.min.css" />
<link href="colorbox/colorbox.html" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!--Header Part Start-->
<header id="header" class="clearfix">
  <div class="headerstrip"><div class="spiral"></div></div>
  
  <div class="container clearfix">
    <a href="index-2.html" id="logo">
      <img src="images/logo.png" alt="Tasty Delicious Recipes">
    </a>
    <nav id="topnav">
      <ul>
        <li>
          <a  href="index-2.html" data-description="Main Start page">Home</a>
        </li>
        <li>
          <a  href="index-2.html" data-description="Main Start page">Recipe Pages</a>
          <ul>
           <li><a href="receipelist.html">Recent Recipes List </a>
            </li>
            <li><a href="receipegrid.html">Recent Recipes Grid </a>
            </li>           
            <li><a href="receipelist2column.html">Recent Recipes 2 Column </a>
            </li>
            <li><a href="receipedetails.html">Recent Detail page </a>
            </li>
           
            <li><a href="author.html">Author page </a>
            </li>
          </ul>
           </li>
        <li class="active">
          <a href="element-shortcodes.html" data-description="Features of theme">Features</a>
          <ul>
            <li><a href="typography.html">Typography</a>
            </li>
            <li class="submenu"><a href="columns.html">Layout</a>
              <ul>
                <li><a href="columns.html">Columns</a>
                </li>
                <li><a href="sitemap.html">Sitemap</a>
                </li>
                <li><a href="404.html">404</a>
                </li>
              </ul>
            </li>
            <li><a href="element-shortcodes.html">Shortcodes</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="blog-list.html" data-description="Our Thought">Blog</a>
          <ul>
            <li><a href="blog-list.html">Blog list</a>
            </li>
            <li><a href="blog-single-gallery.html">Blog Single Gallery</a>
            </li>
            <li><a href="blog-single-image.html">Blog Single Image</a>
            </li>
            <li><a href="blog-single-slider.html">Blog Single Slider</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="contact-us.html" data-description="Send enquiry here">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<!--Header Part End-->

<!--Middle Part Start-->
<section id="maincontainer" class="container clearfix">
  <h1 class="heading1">Responsive Design <span> Typography</span></h1>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
  <h2 class="heading2">2 Type of Responsive Slider </h2>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
  <h3 class="heading3">Best use of CSS3 & html 5</h3>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
  <h4 class="heading4">Sortable Portfolio</h4>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
  <h5 class="heading5">Coding with SEO friendly </h5>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
  <h2 class="heading2">Inline Image left</h2>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <img class="imgbrdleft" src="images/bigimg2.jpg" alt="" title=""> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Lorem Ipsum is simply dummy text of the printing and typesetting industry. orem Ipsum is simply dummy text of the printing and typesetting industryorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
    <br>
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen orem Ipsum is simply dummy text of the printing and typesetting industry book. </p>
  <h2 class="heading2">Inline Image right</h2>
  <p > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <img class="imgbrdrihgt" src="images/smallimg2.jpg" alt="" title=""> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. orem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
    <br>
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen  book. </p>
  <blockquote><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</blockquote>
  <blockquote class="style1"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</blockquote>
  <hr class="devidehr">
  <div class="widthcolumn2">
    <h4 class="heading4">List Option</h4>
    <ul class="listoption1">
      <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li> when an unknown printer took a galley of type</li>
      <li> when an unknown printer took a galley of type</li>
    </ul>
  </div>
  <div class="widthcolumn2 last">
    <h4 class="heading4">List Option</h4>
    <ul class="listoption2">
      <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li> when an unknown printer took a galley of type</li>
      <li> when an unknown printer took a galley of type</li>
    </ul>
  </div>
  <div class="widthcolumn2 ">
    <h4 class="heading4">List Option</h4>
    <ul class="listoption3">
      <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li> when an unknown printer took a galley of type</li>
      <li> when an unknown printer took a galley of type</li>
    </ul>
  </div>
  <div class="widthcolumn2 last">
    <h4 class="heading4">List Option</h4>
    <ul class="listoption4">
      <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li> when an unknown printer took a galley of type</li>
      <li> when an unknown printer took a galley of type</li>
    </ul>
  </div>
  <div class="widthcolumn2">
    <h4 class="heading4">List Option</h4>
    <ul class="listoption5">
      <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li> when an unknown printer took a galley of type</li>
      <li> when an unknown printer took a galley of type</li>
    </ul>
  </div>
  <div class="widthcolumn2 last">
    <h4 class="heading4">List Option</h4>
    <ul class="listoption6">
      <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li> when an unknown printer took a galley of type</li>
      <li> when an unknown printer took a galley of type</li>
    </ul>
  </div>
  <div class="clear"></div>
  
  <table class="tableclass mt20">
    <tr>
      <th>h1</th>
      <th>h2</th>
      <th>h3</th>
      <th>h4</th>
     
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
     
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
     
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
     
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
     
    </tr>
  </table>
</section>
<!--Middle container End-->

<!--Middle Part End-->
<!--Footer Start-->
<footer id="footer" class="clearfix">
  <div class="footerbg clearfix">
    <ul class="footersection container">
      <li class="testimonial">
        <h4>Testimonial</h4>
        <p class="testi">
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
        </p>
    
        <span>Mr. Lorem Ipsum <br>
        C.E.O.</span>
      </li>
      <li class="links">
        <h4>Categories</h4>
        <ul>
          <li>
            <a  href="recipedetails.html">Spicy Food Special</a>
          </li>
          <li>
            <a href="recipedetails.html">Rice</a>
          </li>
          <li>
            <a href="recipedetails.html">Snacks</a>
          </li>
          <li>
            <a href="recipedetails.html">Spicy Sea Food</a>
          </li>
          <li>
            <a href="recipedetails.html"> Tasty Special Food</a>
          </li>
        </ul>
      </li>
      <li class="twiitersection">
        <h4>Twitter</h4>
        <div id="twitter">
        </div>
      </li>
      <li class="flickrsection">
        <h4>Flickr</h4>
        <div id="flickr">
          <ul id="cbox" class="thumbs">
          </ul>
        </div>
      </li>
    </ul>
  </div>
  
  <!--Social links Start-->
  <section id="social" class="container">
    <div class="leftline">@2012 All images & icons are copyright to their owners.</div>
    <div id="footersocial">
      <a class="facebook" title="Facebook" href="#">Facebook</a>
      <a class="twitter" title="Twitter" href="#">Twitter</a>
      <a class="linkedin" title="Linkedin" href="#">Linkedin</a>
      <a class="blooger" title="Blogger" href="#">Blogger</a>
      <a class="rss" title="rss" href="#">rss</a>
      <a class="dig" title="Dig" href="#">Dig</a>
      <a class="googleplus" title="Googleplus" href="#">Googleplus</a>
      <a class="skype" title="Skype" href="#">Skype</a>
      <a class="flickr" title="Flickr" href="#">Flickr</a>
    </div>
  </section>
  <!--Social links End-->
  <!--Go to Top-->
  <a title="Go Top" id="gotop" href="#">&nbsp;</a>
</footer>
<!--Footer End-->

<!--Javascripts-->
<script src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script  type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script><script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script  type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>
<script src="js/jflickrfeed.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>